<template>
  <div class="log-content">
    <tool-bar
      @search="getPageSet"
      @reset="reset"
    >
      <!--toolBar-->
      <template slot="toolBtn" slot-scope="scope">
      </template>

      <!--search -->
      <template slot="toolForm">
        <a-form-item :label="$ct('loginTime','登录时间')">
          <a-range-picker
            style="width: 280px"
            :ranges="{
              '今天': [moment(), moment()],
              '最近一周': [ moment().add(-1, 'W'),moment()],
              '最近一个月': [moment().add(-1, 'M'),moment()] ,
              '最近三个月': [ moment().add(-3, 'M'),moment()]
            }"
            :placeholder="[$ct('StartTime','开始时间'), $ct('EndTime','结束时间')]"
            :valueFormat="'YYYY-MM-DD'"
            @change="startTimeOnChange"
            v-model="startTime"
          />
        </a-form-item>
        <!--@change="startTimeOnChange"-->
        <a-form-item :label="$ct('loginAccount','登录账号')" class="margin-right-sm">
          <a-input v-model="queryParam.userNameId" :placeholder="$ct('loginAccount','登录账号')"/>
        </a-form-item>
      </template>
    </tool-bar>

    <div style="height: calc(100vh - 430px);">
      <a-table
        ref="table"
        size="small"
        :columns="columns"
        :data-source="dataSource"
        rowKey="uuid"
        showPagination="auto"
        :pagination="pagination"
        :scroll="scrollXY"
      >
        <span slot="renderSerial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="renderUserNameId" slot-scope="text, record, index">
          {{ record.userName }}/{{  record.userNameId }}
        </span>
        <template slot="renderLogBrowser" slot-scope="text, record, index">
          <a-tooltip>
            <template slot="title">
              {{text}}
            </template>
            {{text}}
          </a-tooltip>
        </template>
      </a-table>
    </div>

  </div>
</template>

<!--script-->
<script>
  import moment from 'moment';

  //数据表格组件
  import {DataGrid} from "@/components";
  //方法封装
  import {dataGridMixin} from "@/mixins/dataGridMixin";
  //字典
  import TDictSelectTag from '@/components/TopVUI/dict/TDictSelectTag'
  import TMultiSelectTag from '@/components/TopVUI/dict/TMultiSelectTag'

  export default {
    name: "Table",
    components: {DataGrid, TDictSelectTag, TMultiSelectTag},
    mixins: [dataGridMixin],
    filters: {},
    data() {
      return {
        columns: [
          {
            title: "#",
            align: "center",
            width: 55,
            langCode: "serialNo",
            scopedSlots: {
              customRender: "renderSerial",
            },
          },
          {
            title: '登录时间',
            width: 170,
            dataIndex: 'createTime',
            langCode: "loginTime"
          },
          {
            title: '登录账号',
            width: 160,
            dataIndex: 'userNameId',
            langCode: "loginAccount",
            scopedSlots: {
              customRender: 'renderUserNameId'
            }
          },
          {
            title: '登录IP',
            width: 120,
            dataIndex: 'logIp',
            langCode: "loginIp"
          },
          {
            title: '登录设备',
            dataIndex: 'logBrowser',
            width: 900,
            langCode: "loginDevice",
            scopedSlots: {
              customRender: "renderLogBrowser"
            }
          }
        ],
        visible: false,
        confirmLoading: false,
        mdl: null,
        // 查询参数
        queryParam: {
          type: "individual"
        },
        url: {
          getPageSet: '/system/sysLoginLog/getPageSet',
          deleteBatch: '/system/sysLoginLog/deleteBatch'
        },
        startTime:[],
        pageClientHeight: 0,
        dataSource: [],
        pagination: {
          pageNo: 1,
          pageSize: 20,
          showSizeChanger: true,
          showQuickJumper: true,
          hideOnSinglePage: false,
          pageSizeOptions: ['20', '50', '100', '500'],
          onShowSizeChange: (current, pageSize) =>
            this.onShowSizeChange(current, pageSize),
        },
      };
    },
    computed: {
      scrollXY() {
        let height = "";
        height = this.pageClientHeight - 150;
        const tdHeight = this.dataSource?.length * 40 ?? 0;
        return this.dataSource?.length >= 20 || height < tdHeight
          ? { y: height, x: '100%' }
          : { x: '100%' };
      },
    },
    // 组件销毁时移除监听事件
    beforeDestroy() {
      this.destroyResizeEvent();
    },
    mounted() {
      this.getPageSet();
      this.resizeHandler();
      this.initResizeEvent();
    },
    methods: {
      moment,
      startTimeOnChange(val) {
        this.queryParam.startTime = val.join(',')
      },
      getPageSet() {
        this.queryParam.pageSize = this.pagination.pageSize;
        this.queryParam.pageNo = this.pagination.pageNo;
        this.$post(this.url.getPageSet, this.queryParam).then(
          (res) => {
            const pager = {
              ...this.pagination,
            };
            pager.total = res.rows.length;
            this.dataSource = res.rows;
            this.pagination = pager;
          }
        );
      },
      reset(){
        this.queryParam = {};
        this.startTime = [];
        this.queryParam.type = 'individual';
        this.getPageSet();
      },
      // 重新调整表格高度
      resizeHandler() {
        // 获取页面内容的高度
        this.pageClientHeight = document.getElementsByClassName(
          "log-content"
        )[0]?.clientHeight;
      },
      //监听resize
      initResizeEvent() {
        window.addEventListener("resize", this.resizeHandler, false);
      },
      //移除resize
      destroyResizeEvent() {
        window.removeEventListener("resize", this.resizeHandler);
      },
      onShowSizeChange(current, pageSize) {
        const pager = {...this.pagination }
        pager.pageSize = pageSize
        pager.pageNo = current
        this.pagination = pager
        this.getPageSet()
      }
    },
  };
</script>

<!--style-->
<style scoped lang="less">
  .table {
    background-color: @base-bg-color;
    padding: 24px;
  }
  .log-content{
    margin-bottom: 40px;
    height: calc(100vh - 318px);
  }
  /deep/.ant-table-wrapper,/deep/.ant-spin-nested-loading,/deep/.ant-spin-container{
    height: 100%;
  }
</style>

